<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="num1">
    <select name="" id="sel">
        <!-- value不能为空，且不能重复 -->
        <!-- <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option> -->
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" id="num2">
    <button id="btn">=</button>
    <input type="text" id="res">

    <script>

        // 获取对象
        var oNum1 = document.getElementById('num1') ;
        var oNum2 = document.getElementById('num2') ;
        var oSel = document.getElementById('sel') ;
        var oBtn = document.getElementById('btn') ;
        // console.log(oBtn) ;
        var oRes = document.getElementById('res') ;

        // 绑定事件
        oBtn.onclick = function() {
            // alert(666);
            // 拿到输入框的值
            var n1 = oNum1.value ;
            var n2 = oNum2.value ;
            // 拿到符号
            var f = oSel.value ;

            // console.log(n1, n2) ;
            // console.log(f) ;

            // 根据符号进行判断
            if(f === '+') {
                var n3 = n1 * 1 + n2 * 1 ;
                oRes.value = n3 ;
            }
            else if(f === '-') {
                var n3 = n1 - n2 ;
                oRes.value = n3 ;
            }

        }

    </script>
    
</body>
</html>